<template>
    <div class="form-content">
        <form method="post" id="form" :style="{'padding-bottom':is_submit ? '40px' : ''}">
            <cube-scroll ref="scroll">
                <div class="form-group"
                     v-for="(item,index) in form_data"
                     :key="index"
                >
                    <template v-if="item.type === 'text' || item.type === 'phone'">
                        <p class="label">{{item.label}}</p>
                        <cube-input
                                :placeholder="item.label"
                                v-model="value[index]"
                        >
                        </cube-input>
                    </template>

                    <template v-if="item.type === 'radio'">
                        <p class="label">{{item.label}}</p>
                        <cube-radio-group
                                v-model="value[index]"
                                :options="options['options'+index]"
                                :colNum="2"
                        />
                    </template>

                    <template v-if="item.type === 'select'">
                        <p class="label">{{item.label}}</p>
                        <cube-checkbox-group
                                v-model="value[index]"
                                :options="options['options'+index]"
                                :colNum="2"
                        />
                    </template>

                    <template v-if="item.type === 'area'">
                        <p class="label">{{item.label}}</p>
                        <form-area
                                v-model="value[index]"
                                :level="3"
                        ></form-area>
                    </template>

                    <template v-if="item.type === 'textarea'">
                        <p class="label">{{item.label}}</p>
                        <cube-textarea
                                v-model="value[index]"
                                :placeholder="item.label"
                                @focus="$refs.scroll.refresh()"
                                @blur="$refs.scroll.refresh()"
                        >
                        </cube-textarea>
                    </template>
                </div>
            </cube-scroll>
            <cube-button
                    class="submit-button"
                    v-if="is_submit"
                    @click="submit">
                提交
            </cube-button>
        </form>
    </div>
</template>

<script>
import FormArea from "../../form/form-area"
export default {
    name: "form-content",
    data () {
      return {
          // 表单数据
          form_data: [],
          // 单选多选选项集合
          options: {},
          // 表单的值
          value: [],
          list: []
      }
    },
    props: {
        // 表单id
        form_id: Number,
        // 红包id
        red_id: Number,
        //
        is_submit: {
            type: Boolean,
            default: false
        }
    },
    components: {
        FormArea
    },
    computed: {
      data () {
          let data = {}
          this.form_data.forEach((item, index) => {
              data[item.name] = this.value[index]
          })
          return data
      }
    },
    mounted() {
        this.getData()
    },
    methods: {
        /**
         * 获取表单数据详情
         */
        getData() {
            this.$get('form/get', {
                form_id: this.form_id
            })
                .then((res) => {
                    let {code, data} = res.data
                    if(!code) {
                        this.selectOption(data.form_data)
                    }
                })
        },
        /**
         * 单选或者多选数据初始化
         */
        selectOption(data) {
            data.forEach((item,index) => {
                item.name = "form_"+index
                if(item.type === 'radio' || item.type === 'select') {
                    this.options["options"+index] = item.options
                }
                if(item.type === 'select') {
                    this.value[index] = []
                } else {
                    this.value[index] = ''
                }
            })
            this.form_data = data
        },
        submit() {
            if(!this.submitCheck()) return
            this.$post('form/submit', {
                red_id: this.red_id,
                form_id: this.form_id,
                data: this.data
            })
                .then((res) => {
                    if(!res.data.code) {
                        this.$emit("success")
                    } else {
                        this.$createToast({
                            time: 1000,
                            txt: '提交失败',
                            type: 'error',
                            zIndex: 10000
                        }).show()
                    }
                })
        },
        submitCheck() {
            for(let i=0;i<this.form_data.length;i++) {
                let item = this.form_data[i]

                if(item.type === 'text') {
                    if(this.data["form_"+i].trim() === "") {
                        this.$createToast({
                            time: 1000,
                            txt: '请输入' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                }

                if(item.type === 'phone') {
                    if(this.data["form_"+i].trim() === "") {
                        this.$createToast({
                            time: 1000,
                            txt: '请输入' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                    if(!/^1[3456789]\d{9}$/.test(this.data["form_"+i])) {
                        this.$createToast({
                            time: 1000,
                            txt: '请输入正确的' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                }

                if(item.type === 'radio') {
                    if(this.data["form_"+i] === "") {
                        this.$createToast({
                            time: 1000,
                            txt: '请选择' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                }

                if(item.type === 'select') {
                    if(this.data["form_"+i].length <= 0) {
                        this.$createToast({
                            time: 1000,
                            txt: '请选择' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                }

                if(item.type === 'area') {
                    if(this.data["form_"+i] === "") {
                        this.$createToast({
                            time: 1000,
                            txt: '请选择' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                }

                if(item.type === 'textarea') {
                    if(this.data["form_"+i] === "") {
                        this.$createToast({
                            time: 1000,
                            txt: '请输入' + item.label,
                            type: 'error',
                            zIndex: 10000
                        }).show()
                        return false
                    }
                }

            }
            return true;
        }
    }
}
</script>

<style scoped lang="less" src="./form-content.less"></style>